<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <title>注册</title>
    <script type="text/javascript" src="../javascript/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
        blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
        em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
        b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
        details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
        output, ruby, section, summary, time, mark, audio, video, input {
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei";
        }

        body {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
            overflow-y: auto;
            overflow-x: auto;
        }

        address, caption, cite, code, dfn, em, i, strong, th, var, optgroup {
            font-style: normal;
            font-weight: normal;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-size: 12px;
            overflow: auto;
        }

        input, button, select, img {
            vertical-align: middle;
        }

        body {
            font-family: "microsoft yahei";
            font-size: 100%;
            font-size: 1em;
            font-size: 12px;
            color: #333;
            line-height: 1.16667;
            float: left;
        }

        .content {
            width: 100%;
            height: 600px;
            background-image: url("../img/bg2.jpg");
            background-repeat: repeat-x;
            background-position: center;
        }
        .contentMiddle{
            width: 1190px;
            height: 600px;
            background-image: url("../img/registerBg.jpg");
            background-repeat: no-repeat;
            background-position: center;
            margin: 0 auto;
        }


        .header {
            width: 850px;
            height: 90px;
            margin: 0 auto;

        }
        .hdLogo{
            float: left;
        }
        .hdIntro {
            float: left;
            width: 95px;
            height: 28px;
            line-height: 28px;
            font-size: 18px;
            overflow: hidden;
            margin-top: 27px;
            margin-left: 20px;
            padding-left: 15px;
            text-decoration:none;
            color: #999999;
            border-left: 1px solid gainsboro;
        }
        .registerView {
            width: 400px;
            min-height: 200px;
            background-image: url("../img/lognBg.png");
            background-repeat: repeat;
            position: fixed;
            right: 50%;
            top: 130px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .registerBar{
            width: 360px;
            margin-left: 20px;
            height: 32px;
            line-height: 32px;
            margin-top: 13px;
        }
        .registerBar.removeMargin{
            margin-top: 8px;
        }
        .barLeft{
            width: 110px;
            float: left;
            height: 100%;
            text-align: right;
            font-size: 14px;
            font-weight: 600;
            color: #666;
        }
        .barRight{
            width: 190px;
            float: left;
            height: 100%;
            margin-left: 15px;
            padding-left: 15px;
            background-color: white;
        }
        .barRight.removeBar{
            background: url("../img/blank.png");
        }
        .barRight.removeMargin{
           margin: 0;
           width: 210px;
        }
        .registerInput {
            float: left;
            width: 160px;
            height: 32px;
            line-height: 32px;
            outline: none;
            background: none;
            border: none;
        }
        .code{
            width: 100px;
        }
        .codeButton{
            width: 80px;
            float: left;
            height: 100%;
            color: white;
            background-color: #64a5d1;
            text-align: center;
            margin-left: 10px;
        }
        .disabled{
            background-color: #999999;
            display: none;
        }
        .select60{
            width: 60px;
            margin-left: 3px;
            height: 25px;
        }
        .select193{
            width: 193px;
            margin-left: 3px;
            height: 25px;
        }
        .select95{
            width: 95px;
            margin-left: 3px;
            height: 25px;
        }
        .registerButton{
            margin: 0 auto;
            margin-top: 30px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            color: white;
            background-color: #64a5d1;
            text-align: center;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="header">
    <h1 class="hdLogo">
        <img src="../img/lan.png">
    </h1>
    <a href="#" class="hdIntro">用户注册</a>
</div>
<div class="content">
    <div class="contentMiddle">
            <div class="registerView">
                 <div class="registerBar">
                     <div class="barLeft">用户名：</div>
                     <div class="barRight">
                         <input type="text" class="registerInput" placeholder="请输入用户名">
                     </div>
                 </div>
                <div class="registerBar">
                    <div class="barLeft">昵称：</div>
                    <div class="barRight">
                        <input type="text" class="registerInput" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="registerBar">
                    <div class="barLeft">手机号：</div>
                    <div class="barRight">
                        <input type="text" class="registerInput" placeholder="请输入手机号码">
                    </div>
                </div>
                <div class="registerBar">
                    <div class="barLeft">验证码：</div>
                    <div class="barRight code">
                        <input type="text" class="registerInput" placeholder="请输入验证码">
                    </div>
                    <div class="codeButton" id="getCode">获取验证码</div>
                    <div class="codeButton disabled" id="waitCode">请等待(60)</div>
                </div>
                <div class="registerBar">
                    <div class="barLeft">密码：</div>
                    <div class="barRight">
                        <input type="text" class="registerInput" placeholder="请输入密码">
                    </div>
                </div>
                <div class="registerBar">
                    <div class="barLeft">是否在校：</div>
                    <div class="barRight removeBar">
                        <input type="radio" name="onSchool" checked onclick="showSchoolSelection()">在校
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="onSchool" onclick="hideSchoolSelection()">不在校
                    </div>
                </div>
                <div class="registerBar removeMargin schoolSelection">
                    <div class="barLeft">选择地区：</div>
                    <div class="barRight removeBar removeMargin">
                        <select class="select60">
                            <option>XX省</option>
                        </select>
                        <select class="select60">
                            <option>XX省</option>
                        </select>
                        <select class="select60">
                            <option>XX省</option>
                        </select>
                    </div>
                </div>
                <div class="registerBar removeMargin schoolSelection">
                    <div class="barLeft">选择学校：</div>
                    <div class="barRight removeBar removeMargin">
                        <select class="select193">
                            <option>XXX学校</option>
                        </select>
                    </div>
                </div>
                <div class="registerBar removeMargin schoolSelection">
                    <div class="barLeft">选择班级：</div>
                    <div class="barRight removeBar removeMargin">
                        <select class="select95">
                            <option>XX年级</option>
                        </select>
                        <select class="select95">
                            <option>XX班级</option>
                        </select>
                    </div>
                </div>
                <div class="registerButton">注&nbsp;册</div>
            </div>

    </div>
</div>

<script type="text/javascript">
    var marginFix = (document.body.clientWidth) / 2;
    $(".registerView").css("right", marginFix - 200 + "px")

    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    var showSchoolSelection = function () {
        $(".schoolSelection").show();
    }
    var hideSchoolSelection = function () {
        $(".schoolSelection").hide();
    }

    $("#getCode").click(function () {
        var codeTime;
        $("#waitCode").show();
        $("#getCode").hide();
        var startSecond = 59;
        codeTime = setInterval(function () {
            var html = "请等待("+startSecond+")";
            $("#waitCode").html(html);
            startSecond = startSecond -1;
            if (startSecond == 0){
                clearInterval(codeTime);
                $("#waitCode").hide();
                $("#getCode").show();
            }
        },1000)
    })

    if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
    }
    ;
</script>
</body>
</html>